import E from 'wangeditor'
import { addArticle as commitArticle, updateArticle } from '@/api/article'

const articleMixin = {
  data() {
    return {
      editor: ''
    }
  },
  methods: {
    addArticleForTemplate() {
      this.dialogTitle = '新增文章'
      this.articleModDialog = true
      this.$nextTick(() => {
        this.initEditor()
      })
    },
    editArticle(data) {
      this.dialogTitle = '修改文章'
      this.articleModDialog = true
      this.$nextTick(() => {
        this.initEditor()
        this.editor.txt.html(data.content)
      })
    },
    initEditor() {
      if (this.editor != '') {
        console.log('editor已存在')
        return
      }
      this.editor = new E(`#demo1`)
      this.editor.config.height = 400
      // editor.config.uploadImgServer = '/upload-img'
      this.editor.config.uploadImgShowBase64 = true
      this.editor.config.uploadImgMaxSize = 10 * 1024 * 1024
      // 配置 onchange 回调函数，将数据同步到 vue 中
      this.editor.config.onchange = (data) => {
        this.editorData = data
      }
      // 创建编辑器
      this.editor.create()
      // this.editor = editor
    },
    commitArticleInfo(templateId, aid) {
      const param = {
        title: this.articleForm.title,
        content: this.editorData
      }
      if (templateId != null) {
        param.templateId = templateId
      }
      commitArticle(param).then(res => {
        this.$message.success('成功')
        this.articleModDialog = false
        console.log(res.data)
      })
    },
    updateArticleInfo(aid) {
      const param = {
        id: aid,
        title: this.articleForm.title,
        content: this.editorData
      }
      updateArticle(param).then(res => {
        this.$message.success('修改成功')
        this.articleModDialog = false
      })
    },
    showArticleDetail(content) {
      this.$alert(content, '文章详情', {
        confirmButtonText: '确定',
        dangerouslyUseHTMLString: true
      })
    }
  }
}
export default articleMixin
